<template>
  <view v-if="product" class="item" @click="goToVideo" >	
    <view><image class="pic" model="scaleToFill" :src="product.get_videoname ? product.get_videoname.vertical_poster : ''" ></image></view>
    <view class="title">{{product.get_videoname.name_en ? product.get_videoname.name_en : ''}}</view>
  </view>
</template>

<script>
	import { mapGetters,mapActions } from 'vuex'
export default {
  name: "ProductsListItemCom",
 computed: {
 	...mapGetters([
 		'shoppingCartNum',
		'isLogin',
 	])
 },
  props: {
    product: {
      type: Object,
      required: true,
      default: null
    },
		scrollTop:{
			default:0
		},
		isFromHome:{
			default:false
		}
  },
  methods: {
	  ...mapActions(['getUserCartsCount']),
    goToVideo() {
			uni.setStorage({
			    key:"newsTop",
			    data:this.scrollTop
			})
	console.log(this.product.id);
      uni.navigateTo({url: `/pages/video/show?video_id=${this.product.id}&from=${this.isFromHome}`})
    },
	goToShoppingCart() {
			uni.setStorage({
			    key:"newsTop",
			    data:this.scrollTop
			})
	   uni.navigateTo({url: `/packs/pages/cart/cart`})
	},
	
  },
  async created() {
	if (await this.isLogin) {
		await this.getUserCartsCount()
	}
  }
}
</script>

<style lang="scss" scoped>
.item {
  width: 18%;
  // height: 560rpx;
  margin-left:20px;
	height: 220px;
  background: rgba(255,255,255,0.85);
  border-radius:20rpx;
  margin-top:18px;
  cursor: pointer;
  
  clear:both;
  position:relative;
  .pic {
	width:100%;
    height: 180px;
	border-radius:20rpx;
  }
  .title{
	  
	  margin-top:10px;
	  text-align: center;
	  font-size:16px;
	  margin-bottom:10px;
  }
 
  
}

</style>
